<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>

<template>
    <z-paging ref="paging" v-model="list" @query="queryList" safe-area-inset-bottom style="margin-bottom:60px;">
        <view class="paging_cont">
            <!-- 搜索 -->
            <view class="search_box">
                <wd-search class="search" v-model="searchValue" :maxlength="20" cancel-txt="搜索" placeholder-left
                    light />
            </view>
            <view class="search_height"></view>

            <!-- 业务 -->
            <business />

            <!-- 商品活动 -->
            <activity />

            <!-- 商品 -->

            <goods_row :data="list" />
        </view>
    </z-paging>

</template>

<script lang="ts" setup>
import business from './components/business.vue'
import activity from './components/activity.vue'
import { http } from '@/utils/http'

const searchValue = ref('')
const list = ref<any>([])
const paging = ref(null)
function queryList(page: number, page_size: number) {
    http.get('/member/goods/goods', { state: '上架', page: page, page_size: page_size }).then((res: any) => {
        if (res.code === 200) {
            paging.value.complete(res.data.data);
        }
    })
}
</script>

<style scoped>
.search_box {
    position: fixed;
    top: 0;
    left: 20rpx;
    z-index: 1;
    width: calc(100% - 40rpx);
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    background: #F8F8F8 !important;
}

.search {
    padding: 6rpx 6rpx 6rpx 0;
    background: white !important;
    border: solid 2rpx #FE6771;
    border-radius: 12rpx;
}

.search_height {
    height: 100rpx;
}

:deep(.wd-search__input) {
    height: 62rpx;
}

:deep(.wd-search__cancel) {
    height: 62rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    line-height: 62rpx;
    color: white;
    background: linear-gradient(to right, #FE6771, #FF424E);
    border-radius: 10rpx;
}
</style>
